import React, { Component } from 'react'
import Child from './Child'
import { Abc } from './Abc'

const abc = new Abc()

class Index extends Component {

  state = {
    count: 0,
    list: ['a'],
    obj: {
      x: 100
    }
  }

  incrementCount() {
    // 注意：这样 *不会* 像预期的那样工作。
    // this.setState((state) => {
    //   return {
    //     count: state.count + 1
    //   }
    // })
    this.setState({
      count: this.state.count + 1
    })
  }

  handleClick() {
    // 第一种写法：一般写法
    // this.setState({
    //   count: 100
    // })

    // 第二种写法：如果基于原值产生新值的时候
    // this.setState(state => ({
    //   count: state.count + 1
    // }))

    // 第三种写法：在本次状态修改完，且DOM渲染完
    // this.setState({
    //   count: 100
    // }, () => {
    //   console.log(document.querySelector('#root').innerHTML)
    // })

    // 解释为什么使第二种写法
    this.incrementCount()
    this.incrementCount()
    this.incrementCount()
  }

  handleChangeClick() {
    // 第一种更新页面的方法
    // this.setState({
    //   list: [
    //     ...this.state.list,
    //     'b'
    //   ]
    // })

    // 第二种更新页面的方法
    // this.state.list.push('b')
    // this.forceUpdate()

    // 第三种写法
    // this.state.list.push('b')
    // this.setState({})

    
  }

  componentDidMount() {
    this.incrementCount()
    this.incrementCount()
    this.incrementCount()
    console.log(this.state.count)

    
  }

  render() {
    return (
      <>
        <div>
          {this.state.count}
          <button onClick={this.handleClick.bind(this)}>add</button>
        </div>
        <div>
          {
            this.state.list.map((value) => {
              return <div key={value}>{value}</div>
            })
          }
          {JSON.stringify(this.state.obj)}
          <button onClick={this.handleChangeClick.bind(this)}>change list</button>
        </div>

        <Child title={{abc: 'aaa', eee: 300, def: 100}}>
          <div>abc</div>
          <div>def</div>
        </Child>
      </>
    );
  }
}

export default Index;